import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import { RefreshLoginAsync } from 'api/login'

Vue.use(Router)

/**
 * 路由对象
 *
 * meta 自定义参数
 *      transition 路由切换动画
 *      player_mini_height  迷你播放器的高度
 *      login_required  是否需要登录验证
 */

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('views/login')
    },
    {
      path: '/',
      redirect: '/recommend',
      name: 'layout',
      component: () => import('views/layout'),
      children: [
        {
          path: 'recommend',
          name: 'recommend',
          meta: {
            transition: 'tab',
            player_mini_height: '54px'
          },
          component: () => import('views/layout/recommend')
        },
        {
          path: 'my',
          name: 'my',
          meta: {
            transition: 'tab',
            player_mini_height: '54px'
          },
          component: () => import('views/layout/my')
        },
        {
          path: 'rank',
          name: 'rank',
          meta: {
            transition: 'tab',
            player_mini_height: '54px'
          },
          component: () => import('views/layout/rank')
        },
        {
          path: 'singer',
          name: 'singer',
          meta: {
            transition: 'tab',
            player_mini_height: '54px'
          },
          component: () => import('views/layout/singer')
        },
        {
          path: 'user',
          name: 'user',
          meta: {
            transition: 'tab',
            login_required: true
          },
          component: () => import('views/user')
        },
        {
          path: 'themes',
          name: 'themes',
          meta: {
            transition: 'tab'
          },
          component: () => import('views/Themes')
        },
        {
          path: 'test',
          name: 'test',
          meta: {
            transition: 'tab'
          },
          component: () => import('views/test/test')
        },
        {
          path: 'icon-list',
          name: 'icon-list',
          meta: {
            transition: 'tab'
          },
          component: () => import('components/icon/icon-list')
        },
        {
          path: 'search',
          name: 'search',
          meta: {
            transition: 'slide-up',
            transition_out: 'slide-down'
          },
          component: () => import('views/search/search')
        },
        {
          path: 'player',
          name: 'player',
          meta: {
            transition: 'fade',
            transition_out: 'fade',
            player_mini_height: '-60px'
          },
          component: () => import('views/player/player')
        },
        {
          path: 'playlist',
          name: 'playlist',
          meta: {
            transition: 'tab-right'
          },
          component: () => import('views/PlayList')
        },
        {
          path: 'comment',
          name: 'comment',
          meta: {
            transition: 'slide-up',
            transition_out: 'slide-down',
            player_mini_height: '-60px'
          },
          component: () => import('views/comments')
        },
        {
          path: 'download',
          name: 'download',
          meta: {
            transition: 'tab'
          },
          component: () => import('views/download')
        }
      ]
    }
  ]
})

router.beforeEach(async (to, from, next) => {
  //  验证当前页面是否需要登录
  if (to.meta.login_required && store.state.user.userId === null) {
    try {
      await RefreshLoginAsync()
      await store.dispatch('user/getStatus')
    } catch (err) {
      console.log(err)
      return next(`/login?redirect=${to.path}`)
    }
    return next()
  }
  next()
})

export default router
